import React from 'react';
import { Card, Row, Col, Statistic, Table, Descriptions } from 'antd';
import { useRequest } from 'ahooks';
import {
  DashboardOutlined,
  DesktopOutlined,
  DatabaseOutlined,
  TeamOutlined,
  CloudServerOutlined
} from '@ant-design/icons';
import {
  getSystemMetrics,
  getOnlineUserCount,
  getSystemInfo,
  getRedisInfo,
  getDatabaseInfo
} from '@/api/monitor';
import { formatBytes, formatDuration } from '@/utils/format';

const SystemMonitor: React.FC = () => {
  const { data: metrics } = useRequest(getSystemMetrics, {
    pollingInterval: 5000
  });

  const { data: onlineUsers } = useRequest(getOnlineUserCount, {
    pollingInterval: 5000
  });

  const { data: systemInfo } = useRequest(getSystemInfo);
  const { data: redisInfo } = useRequest(getRedisInfo);
  const { data: dbInfo } = useRequest(getDatabaseInfo);

  return (
    <div className="p-6">
      <Row gutter={[16, 16]}>
        <Col span={6}>
          <Card>
            <Statistic
              title="CPU使用率"
              value={metrics?.systemCpuUsage.toFixed(2)}
              suffix="%"
              prefix={<DashboardOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="内存使用率"
              value={((metrics?.heapMemoryUsed || 0) / (metrics?.maxMemory || 1) * 100).toFixed(2)}
              suffix="%"
              prefix={<DesktopOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="在线用户"
              value={onlineUsers}
              prefix={<TeamOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="运行时长"
              value={formatDuration(metrics?.uptime || 0)}
              prefix={<DashboardOutlined />}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]} className="mt-4">
        <Col span={12}>
          <Card title="系统信息" className="h-full">
            <Descriptions column={2}>
              {systemInfo && Object.entries(systemInfo).map(([key, value]) => (
                <Descriptions.Item key={key} label={key}>{value}</Descriptions.Item>
              ))}
            </Descriptions>
          </Card>
        </Col>
        <Col span={12}>
          <Card title="JVM信息" className="h-full">
            <Descriptions column={2}>
              <Descriptions.Item label="堆内存使用">
                {formatBytes(metrics?.heapMemoryUsed || 0)} / {formatBytes(metrics?.maxMemory || 0)}
              </Descriptions.Item>
              <Descriptions.Item label="非堆内存使用">
                {formatBytes(metrics?.nonHeapMemoryUsed || 0)}
              </Descriptions.Item>
              <Descriptions.Item label="线程数">
                {metrics?.threadCount} / {metrics?.peakThreadCount}
              </Descriptions.Item>
              <Descriptions.Item label="守护线程数">
                {metrics?.daemonThreadCount}
              </Descriptions.Item>
              <Descriptions.Item label="Young GC次数">
                {metrics?.youngGcCount}
              </Descriptions.Item>
              <Descriptions.Item label="Young GC时间">
                {metrics?.youngGcTime}ms
              </Descriptions.Item>
              <Descriptions.Item label="Old GC次数">
                {metrics?.oldGcCount}
              </Descriptions.Item>
              <Descriptions.Item label="Old GC时间">
                {metrics?.oldGcTime}ms
              </Descriptions.Item>
            </Descriptions>
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]} className="mt-4">
        <Col span={12}>
          <Card title="Redis信息" extra={<CloudServerOutlined />}>
            <Descriptions column={2}>
              {redisInfo && Object.entries(redisInfo).map(([key, value]) => (
                <Descriptions.Item key={key} label={key}>{value}</Descriptions.Item>
              ))}
            </Descriptions>
          </Card>
        </Col>
        <Col span={12}>
          <Card title="数据库信息" extra={<DatabaseOutlined />}>
            <Descriptions column={2}>
              {dbInfo && Object.entries(dbInfo).map(([key, value]) => (
                <Descriptions.Item key={key} label={key}>{value}</Descriptions.Item>
              ))}
            </Descriptions>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default SystemMonitor; 